<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            插槽的使用:<br>
            <Hello  :user="{name:'张三',age:20}">
               
                <template v-slot="scope">
                   你说什么？  <span style="color: #FF0000;">{{scope.row.name}}</span>
                </template>
            </Hello>
        </div>
        
        <script>
           var hello={
               props:{
                   user:{
                       type:Object,
                       default:function(){
                           return {}
                       }
                   }
               },
               template:
               `
                <div>
                 <slot v-bind:row="user"></slot>
                <div>名称：{{user.name}}</div>
               <div>年龄：{{user.age}}</div>
                </div>
               `
           };
           new Vue({
               el:"#container",
               components:{
                   hello
               }
           });
        </script>
    </body>
</html>
